<template>
	<div id="app">
		<div id="nav" style="position: relative;">
			<div class="line"></div>
			<el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
			 background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
				<el-menu-item index="1" style='margin-left: 50px;'>
					<router-link to="/" style="color: white;">首页</router-link>
				</el-menu-item>
				<el-menu-item index="2">
					<router-link to="/about" style="color: white;">电影</router-link>
				</el-menu-item>
				<img src="./images/002.jpg" alt="" class="ia">
				<el-menu-item index="4" style='margin-left: 800px;'>
					<router-link to="/index" style="color: white;">登录</router-link>
				</el-menu-item>
				<el-menu-item index="5">
					<router-link to="/login" style="color: white;"> 注册</router-link>
				</el-menu-item>
				<el-submenu index="3">
					<template slot="title">用户中心</template>
					<el-menu-item index="3-1">
						<router-link to="/personalInformation" style="color: white;">个人信息</router-link>
					</el-menu-item>

					<el-menu-item index="3-2">
						<router-link to="/login" style="color: white;">注册</router-link>
					</el-menu-item>
					<el-menu-item index="3-3">
						<router-link to="/userUpdate" style="color: white;">更新</router-link>
					</el-menu-item>
					<el-menu-item index="3-4">
						<router-link to="/logout" style="color: white;">注销/挂失/退出</router-link>
					</el-menu-item>
				</el-submenu>
				<el-submenu index="7">
					<template slot="title">会员卡</template>
					<el-menu-item index="7-1">
						<router-link to="/care" style="color: white;">会员卡信息</router-link>
					</el-menu-item>
					<el-menu-item index="7-3">
						<router-link to="/chongzhi" style="color: white;">充值</router-link>
					</el-menu-item>
					<el-menu-item index="7-2">
						<router-link to="/xiaofeijilu" style="color: white;">消费记录</router-link>
					</el-menu-item>
				</el-submenu>
				<el-menu-item index="6">
					<router-link to="/help" style="color: white;">帮助中心</router-link>
				</el-menu-item>
			</el-menu>
		</div>

		<router-view />
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		data() {
			return {
				activeIndex: '1',
				activeIndex2: '1'
			};
		},
		mounted() {
			window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))

			window.addEventListener('unload', e => this.unloadHandler(e))


			console.log("aaaaa");

		},
		destroyed() {
			window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
			window.removeEventListener('unload', e => this.unloadHandler(e))
			console.log("bbbbb");

		},
		methods: {
			beforeunloadHandler() {

				var n = window.event.screenX - window.screenLeft;
				var b = n > document.documentElement.scrollWidth - 20;
				if (b && window.event.clientY < 0 || window.event.altKey) {
					var params = new URLSearchParams();
					params.append('id', localStorage.getItem("userId"));
					var that = this;
					axios.post('/user/tuichu', params, {
							header: {
								'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
							}
						})
						.then(function(data) {
							console.log("退出成功");

							that.$router.push({
								path: "/"
							})
							var storage = window.localStorage;
							storage.clear();
							console.log(data);
						}).catch(function(Error) {
							console.log(Error);
						});
				} else {
					console.log("是刷新而非关闭");
				}

			},
			 unloadHandler(e) {
				this._gap_time = new Date().getTime() - this._beforeUnload_time;
				console.log("dddd");
				//判断是窗口关闭还是刷新

				//如果是登录状态，关闭窗口前，移除用户

				var params = new URLSearchParams();
				params.append('id', localStorage.getItem("userId"));
				console.log(params);
				 axios.post('/user/tuichu', params, {
						header: {
							'Content-type': 'application/x-www-form-urlencoded;charset=UTF-8'
						}
					})
					.then(function(data) {
						debugger
						console.log("退出成功");
						var storage = window.localStorage;
						storage.clear();
						console.log(data);
					}).catch(function(Error) {
						console.log(Error);
						
					});

				console.log("fffff");
				debugger
			}


		},
	}
</script>


<style>
	.ia {
		position: absolute;
		left: 300px;
	}

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
	}

	#nav {
		margin-top: 20px;
	}

	#nav a {
		font-weight: bold;
		color: #2c3e50;
	}

	#nav a.router-link-exact-active {
		color: #42b983;
	}
</style>
